<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/demo.css">
</head>

<body style="height: 100%" id="body">
    <div class="headerBox">
        <header class="bg">雀实省钱</header>
        <div class="head-tab">
            <div class="tab-box">
                <div class="active" data-index="0">首页</div>
                <div data-index="1">用户</div>
                <div data-index="2">交易</div>
                <div data-index="3">商品</div>
            </div>
            <div class="tab-swiper">
                <div></div>
            </div>
        </div>
    </div>
    <section>
        <div class="moveBox">
            <!-- 首页 -->
            <div>
                <!-- 基本概况 -->
                <div class="content basic-box">
                    <div class="canvas-head">基本概括
                        <text class="canvas-head-text">（数据更新截止至上一日24：00）</text>
                    </div>
                    <div class="canvas-data">
                        <div class="canvas-data-msg">
                            <div>生成金额(元)</div>
                            <div id='basic8'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>注册会员数(个)</div>
                            <div id='basic9'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>生成卡数(张)</div>
                            <div id='basic7'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>激活金额(元)</div>
                            <div id='basic5'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>激活人数(个)</div>
                            <div id='basic10'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>激活卡数(张)</div>
                            <div id='basic4'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>兑换金额(元)</div>
                            <div id='basic1'>0</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>兑换人数(个)</div>
                            <div id='basic11'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>人均兑换金额(元)</div>
                            <div id='basic3'>0</div>
                        </div>

                        <div class="canvas-data-msg">
                            <div>支付金额(元)</div>
                            <div id='basic12'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>支付人数(个)</div>
                            <div id='basic13'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>客单价(元)</div>
                            <div id='basic14'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>预估佣金(元)</div>
                            <div id='basic15'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>支付笔数(个)</div>
                            <div id='basic16'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>人均结算佣金(元)</div>
                            <div id='basic17'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>结算佣金(元)</div>
                            <div id='basic18'>--</div>
                        </div>
                        <div class="canvas-data-msg">
                            <div>已结算订单(个)</div>
                            <div id='basic19'>--</div>
                        </div>

                        <!-- <div class="canvas-data-msg">
                                <div>兑换次数(次)</div>
                                <div id='basic2'>0</div>
                            </div> -->
                        <div class="canvas-data-msg">
                            <div onclick="model(1,'money')">
                                <div>会员总余额(元)</div> <img src="image/question.png" alt="">
                            </div>
                            <div id='basic6'>0</div>
                        </div>


                        <!-- <div class="canvas-data-msg">
                                <div onclick="model(1,'login')"><div>用户激活率</div> <img src="image/question.png" alt=""></div>
                                <div id='basic10'>0%</div>
                            </div> -->
                    </div>
                </div>
                <!-- 定制卡排行榜 -->
                <div class="content" style="padding-bottom:20px">
                    <div class="canvas-head">定制卡排行榜
                        <text class="canvas-head-text" id='canvasHeadtext'>（单位：元）</text>
                        <div class="rank-tab dzcard-tab">
                            <div class="active">金额</div>
                            <div>数量</div>
                        </div>
                    </div>
                    <div class="rankingBox">
                        <div class="ranking" id='ranking'>
                            <div>
                                <div>排名</div>
                                <div>公司名称</div>
                                <div class="ranking-tab-dz active">生成金额 <i></i></div>
                                <div class="ranking-tab-dz">激活金额 <i></i></div>
                                <div class="ranking-tab-dz">兑换金额 <i></i> </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- 生成卡各面值金额占比分析 -->
                <div class="content">
                    <div class="canvas-head">生成卡各面值金额占比分析
                        <text class="canvas-head-text">（单位：张）</text>
                    </div>
                    <div class="pie-two-box">
                        <div>
                            <h2>普通卡</h2>
                            <div>总计：<i id='normalCardSum'></i> </div>
                            <div>
                                <div id="pie1" style="width: 80%;height:200px;margin: 0 auto;"></div>
                            </div>
                        </div>
                        <div>
                            <h2>定制卡</h2>
                            <div>总计：<i id='customCardSum'></i> </div>
                            <div>
                                <div id="pie2" style="width: 80%;height:200px;;margin: 0 auto;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-msg">
                        <div class="card-msg-color" id='cardMsgColor'>
                            <!-- <div><div style="background: #FF9945"></div>200元</div>
                                <div><div style="background: #4CDFC2"></div>500元</div>
                                <div><div style="background: #5EB0EF"></div>1000元</div>
                                <div><div style="background: #F9CF2B"></div>2000元</div> -->
                        </div>
                    </div>
                </div>
                <!-- 激活信息，兑换金额 -->
                <div class="content">
                    <div class="activating-tab">
                        <div class="activating-tab-box">
                            <div class="active">激活卡数</div>
                            <div>激活金额</div>
                            <div>兑换金额</div>
                        </div>
                        <div class="activating-tab-swiper">
                            <div></div>
                        </div>
                    </div>
                    <div class="time-tab">
                        <div class="time-tab-change">
                            <div class="active">昨日</div>
                            <div>近7日</div>
                            <div>近30日</div>
                            <div>月</div>
                        </div>
                        <div class="time-tab-time" id='timeTabTime'>
                            <!-- 昨日 <text>（20190506）</text> -->
                        </div>
                        <div class="time-tab-extent" id='timeTabExtent'>
                            <!-- <text>1600 </text> 张 
                                <text>上一日 1500 </text>
                                <text class="red">↑ 10%</text> -->
                        </div>
                    </div>
                    <div class="">
                        <div id="main" style="width: 100%;height:300px;"></div>
                        <div id="main1" style="width: 100% !important;height:300px;"></div>
                    </div>
                </div>
            </div>
            <!-- 用户 -->
            <div>
                <!-- 用户账户余额人数统计 -->
                <div class="content">
                    <div class="canvas-head">用户账户余额人数统计
                        <text class="canvas-head-text" id='canvasHeadText'>（单位：个）</text>
                    </div>
                    <div class="overPeobox">
                        <div>
                            <div>0元</div>
                            <div>1-50元</div>
                            <div>51-100元</div>
                            <div>101-200元</div>
                            <div>200元以上</div>
                        </div>
                        <div>
                            <div id="userAccount0">--</div>
                            <div id="userAccount50">--</div>
                            <div id="userAccount100">--</div>
                            <div id="userAccount200">--</div>
                            <div id="userAccount300">--</div>
                        </div>
                    </div>
                </div>
                <!-- 用户账户余额为0元趋势分析 -->
                <div class="content">
                    <div class="canvas-head">用户账户余额为0元趋势分析</div>
                    <div class="canvas-head-text">
                        <!-- （2019-01-01至2019-01-03 近30天 单位：个） -->
                    </div>
                    <div class="userOvertozero" id='userOvertozero'>


                    </div>
                </div>
                <!-- 注册用户、激活兑换、支付人数 -->
                <div class="content">
                    <div class="my-tab-box loginActpay">
                        <div class="tab-box-model1">
                            <div class="tab-box-modelx" class="active">注册用户</div>
                            <div class="tab-box-modelx">激活兑换/支付人数</div>
                        </div>
                        <div class="tab-box-swiper1">
                            <div></div>
                        </div>
                    </div>
                    <div class="time-tab-change1">
                        <div class="active">昨日</div>
                        <div>近7天</div>
                        <div>近30天</div>
                        <div>月</div>
                    </div>
                    <div class="time-tab-time" id='timeTab'>
                        <!-- 昨日 <text id='timeTab'></text> -->
                    </div>
                    <div class="time-tab-extent" id='timeTabExtent1'>
                        <!-- <text>---- </text> 张
                        <text>上一日 --- </text>
                        <text class="red">↑ --%</text> -->
                    </div>
                    <div class="products1">
                        <div class="userLoginPay selected" id='userLoginPay1'>

                        </div>
                        <div class="userLoginPay" id='userLoginPay2'>

                        </div>
                    </div>
                </div>
                <!-- 各平台兑换、支付趋势分析 -->
                <div class="content">
                    <div class="canvas-head">各平台兑换、支付趋势分析
                        <text class="canvas-head-text" id='canvasHeadText'>（单位：个）</text>
                    </div>
                    <div class="my-tab-box exchangePay">
                        <div class="tab-box-model2">
                            <div class="tab-box-model2x active">兑换人数</div>
                            <div class="tab-box-model2x">支付人数</div>
                        </div>
                        <div class="tab-box-swiper2">
                            <div></div>
                        </div>
                    </div>
                    <div class="time-tab-change2">
                        <div class="active">昨日</div>
                        <div>近7天</div>
                        <div>近30天</div>
                        <div>月</div>
                    </div>
                    <div class="overPeobox" style="text-align: center;margin-top: 10px;">
                        <div>
                            <div>好品购</div>
                            <div>天猫</div>
                            <div>淘宝</div>
                            <div>京东</div>
                            <div>拼多多</div>
                        </div>
                        <div id="overPeoboxtype">
                            <!-- <div>--</div>
                            <div>--</div>
                            <div>--</div>
                            <div>--</div>
                            <div>--</div> -->
                        </div>
                    </div>


                    <div class="products2">
                        <div class="exchangePay selected" id="exchangePay1">

                        </div>

                        <div class="exchangePay" id="exchangePay2">

                        </div>
                    </div>
                </div>
                <!-- 兑换，支付频次人数分布 -->
                <div class="content">
                    <div class="canvas-head">兑换、支付频次人数分布
                        <text class="canvas-head-text" id='canvasHeadText'>（单位：个）</text>
                    </div>
                    <div id='exchangePaypeople'>

                    </div>
                </div>
                <!-- 用户关键流程漏斗分析 -->
                <div class="content">
                    <div class="canvas-head">用户关键流程漏斗分析</div>
                    <div class="canvas-head-text">（2019-01-01至2019-01-03 近30天 单位：个）</div>
                    <div class="funnel">
                        <div class="funnel-title">1.注册成功人数 <div>1000人</div>
                        </div>
                        <div class="funnel-progress-bar">
                            <div></div>
                        </div>
                        <div class="funnel-percentage">80%</div>
                        <div class="funnel-title">2.激活成功人数 <div>800人</div>
                        </div>
                        <div class="funnel-progress-bar">
                            <div></div>
                        </div>
                        <div class="funnel-percentage">50%</div>
                        <div class="funnel-title">3.兑换成功人数 <div>400人</div>
                        </div>
                        <div class="funnel-progress-bar">
                            <div></div>
                        </div>
                    </div>
                </div>
                <!-- 各平台优惠券兑换情况分析 -->
                <div class="content">
                    <div class="canvas-head">各平台优惠券兑换情况分析
                        <text class="canvas-head-text" id='canvasHeadText'>（单位：元）</text>
                        <div class="rank-tab dhcoupon-tab">
                            <div class="active">金额</div>
                            <div>次数</div>
                        </div>
                    </div>
                    <div class="sum-box">总计：<text id='textSum'></text> </div>
                    <div>
                        <div id="pie3" style="width: 100%;height:200px;margin: 0 auto;"></div>
                    </div>
                </div>
            </div>
            <!-- 交易 -->
            <div>
                <!-- 优惠券兑换频次人数分布情况分析 -->
                <div class="content">
                    <div class="canvas-head">优惠券兑换频次人数分布情况分析
                        <text class="canvas-head-text">（单位：人）</text>
                    </div>
                    <div>
                        <div id="zhu4" style="width: 100%;height:200px;margin: 0 auto;"></div>
                    </div>
                </div>
                <!-- 兑换、支付预估佣金金额  及支付次数 -->
                <div class="content">
                    <div class="my-tab-box loginActpay">
                        <div class="tab-box-model3">
                            <div class="tab-box-model3x active">兑换/支付预估佣金金额</div>
                            <div class="tab-box-model3x">兑换/支付次数</div>
                        </div>
                        <div class="tab-box-swiper3">
                            <div></div>
                        </div>
                    </div>
                    <div class="time-tab-change">
                        <div class="active">昨日</div>
                        <div>近7天</div>
                        <div>近30天</div>
                        <div>月</div>
                    </div>

                    <!-- 图表 -->
                    <div class="products3">
                        <div class="exchangeYjnum selected" id='exchangeYjnum1'>

                        </div>
                        <div class="exchangeYjnum" id='exchangeYjnum2'>

                        </div>
                    </div>

                </div>
                <!-- 各平台兑换，支付，佣金占比分析 -->
                <div class="content">
                    <div class="canvas-head">各平台兑换、支付、佣金占比分析
                        <div class="rank-tab1 dhcoupon-tab">
                            <div class="rank-tabx active">金额</div>
                            <div class="rank-tabx">数量</div>
                        </div>
                    </div>
                    <div class="canvas-head-text">（单位：元）</div>

                    <div class="products4">
                        <div class="zhanbiAnalysis selected" id='zhanbiAnalysis1'>

                        </div>
                        <div class="zhanbiAnalysis" id='zhanbiAnalysis2'>

                        </div>
                    </div>
                </div>
                <!-- 各平台兑换，支付，佣金趋势分析 -->
                <div class="content">
                    <div class="canvas-head">各平台兑换、支付、佣金趋势分析</div>
                    <div class="my-tab-box loginActpay">
                        <div class="tab-box-model5">
                            <div class="active">兑换金额</div>
                            <div>支付金额</div>
                            <div>预估佣金</div>
                            <div>兑换次数</div>
                            <div>支付笔数</div>
                        </div>
                        <div class="tab-box-swiper5">
                            <div></div>
                        </div>
                    </div>
                    <div class="time-tab-change">
                        <div class="active">昨日</div>
                        <div>近7天</div>
                        <div>近30天</div>
                        <div>月</div>
                    </div>
                    <div class="overPeobox" style="text-align: center;margin-top: 10px;">
                        <div>
                            <div>好品购</div>
                            <div>天猫</div>
                            <div>淘宝</div>
                            <div>京东</div>
                            <div>拼多多</div>
                        </div>
                        <div>
                            <div>--</div>
                            <div>--</div>
                            <div>--</div>
                            <div>--</div>
                            <div>--</div>
                        </div>
                    </div>
                    <div id='model3p4'>

                    </div>
                </div>
            </div>
            <!-- 商品 -->
            <div>
                <!-- 优惠券兑换次数商品排行榜 -->
                <div class="content" style="padding-right: 20px;">
                    <div class="canvas-head">优惠券兑换次数商品排行榜
                        <text class="canvas-head-text">（单位：次）</text>
                    </div>
                    <div class="product-ranking" id='productRanking'>
                        <!-- <div>
                                <div>排行</div>
                                <div>商品名称</div>
                                <div>兑换次数</div>
                            </div>
                            <div>
                                <div>1</div>
                                <div>
                                    <img src="" alt="">
                                    商品名称1
                                </div>
                                <div>100</div>
                            </div> -->
                    </div>
                </div>
                <!-- 商品兑换排行榜 -->
                <div class="content">
                    <div class="canvas-head">商品兑换排行榜
                        <text class="canvas-head-text" id='canvasHeadText1'>（单位：元）</text>
                        <div class="rank-tab dhcoupon-tab2" id="dhcoupon-tab2">
                            <div class="active">金额</div>
                            <div>数量</div>
                        </div>
                    </div>
                    <div class="my-tab-box model4p1tab">
                        <div class="tab-box-model4" id='proTimeRanking'>
                            <div class="tab-box-modelx4 active">全部</div>
                            <div class="tab-box-modelx4">好品购</div>
                            <div class="tab-box-modelx4">京东</div>
                            <div class="tab-box-modelx4">拼多多</div>
                            <div class="tab-box-modelx4">淘宝</div>
                            <div class="tab-box-modelx4">天猫</div>
                        </div>
                        <div class="tab-box-swiper4">
                            <div></div>
                        </div>

                        <div class="time-tab">
                            <div class="time-tab-change" id='timeChange'>
                                <div class="active">昨日</div>
                                <div>近7日</div>
                                <div>近30日</div>
                                <div>月</div>
                            </div>
                        </div>


                        <div class="product-ranking" id='productRanking1'>
                            
                        </div>


                    </div>
                </div>


                <!-- 商品支付排行榜 -->
                <div class="content">
                    <div class="canvas-head">商品支付排行榜
                        <text class="canvas-head-text" id='canvasHeadText2'>（单位：元）</text>
                        <div class="rank-tab dhcoupon-tab3" id="dhcoupon-tab3">
                            <div class="active">金额</div>
                            <div>数量</div>
                        </div>
                    </div>
                    <div class="my-tab-box model4p1tab">
                        <div class="tab-box-model6" id='proTimeRanking2'>
                            <div class="tab-box-modelx6 active">全部</div>
                            <div class="tab-box-modelx6">好品购</div>
                            <div class="tab-box-modelx6">京东</div>
                            <div class="tab-box-modelx6">拼多多</div>
                            <div class="tab-box-modelx6">淘宝</div>
                            <div class="tab-box-modelx6">天猫</div>
                        </div>
                        <div class="tab-box-swiper6">
                            <div></div>
                        </div>

                        <div class="time-tab">
                            <div class="time-tab-change2" id='timeChange2'>
                                <div class="actives">昨日</div>
                                <div>近7日</div>
                                <div>近30日</div>
                                <div>月</div>
                            </div>
                        </div>


                        <div class="product-ranking" id='productRanking2'>
                            
                        </div>


                    </div>
                </div>

                <!-- 商品结算佣金排行榜 -->
                <div class="content">
                    <div class="canvas-head">商品结算佣金排行榜
                        <text class="canvas-head-text" id='canvasHeadText3'>（单位：元）</text>
                        <div class="rank-tab dhcoupon-tab4" id="dhcoupon-tab4">
                            <div class="active">金额</div>
                            <div>数量</div>
                        </div>
                    </div>
                    <div class="my-tab-box model4p1tab">
                        <div class="tab-box-model7" id='proTimeRanking3'>
                            <div class="tab-box-modelx7 active">全部</div>
                            <div class="tab-box-modelx7">京东</div>
                            <div class="tab-box-modelx7">拼多多</div>
                            <div class="tab-box-modelx7">淘宝</div>
                            <div class="tab-box-modelx7">天猫</div>
                        </div>
                        <div class="tab-box-swiper7">
                            <div></div>
                        </div>


                        <div class="product-ranking" id='productRanking3'>
                            
                        </div>
                    </div>
                </div>



            </div>
        </div>
    </section>
    <!-- 弹出model -->
    <div class="model" id='model'>
        <div>
            <h1 onclick="model(0)">说明<img src="image/close.png" alt=""></h1>
            <p id="p1"></p>
            <button onclick="model(0)">我知道了</button>
        </div>
    </div>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/demo.js"></script>
</body>

</html>